<template>
	<view >
		
		<!-- #ifdef H5 -->
		<topOpenBar url="goodDetail" :id="goodData.id" :uid="parentId"></topOpenBar>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<ttBar :title="goodData.isDelete?'课程过期不存在':'课程详情'" :bgColor="goodData.isDelete?'#ffffff':titleBg" :color="goodData.isDelete?'#000000':wordsColor" :showZhanwei="false">
			<template v-slot:leftCnt>
				<text class="iconfont icon-back lIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}"></text>
			</template>
			<template v-slot:rightCnt>
				<text class="iconfont icon-cart rIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toCar"></text>
				<text class="iconfont icon-home rIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toHome"></text>
			</template>
		</ttBar>
		<!-- #endif -->
		
		
		<view class="deleteBox" v-if="goodData.isDelete" >
			<text class="iconfont icon-kecheng"></text>
			<text>课程过期不存在</text>
		</view>
		
		
		<view v-if="!goodData.isDelete" class="cntColumn">
			<!-- 轮播图 -->
			<goodSwiper :swiperList="goodData.bannerList" :dotsStyles="dotsStyles" :borderRadius="0"></goodSwiper>


			<!-- 价格与标题 -->
			<goodInfo :goodData="goodData" :showPt="true"></goodInfo>
			
			<!-- 课程tag -->
			<goodLabels :labels="goodData.labels" v-if="goodData.labels.length>0"></goodLabels>
			
			<!-- 课程保障 -->
			<goodGuarantee :protectList="goodData.protectList"></goodGuarantee>
			
			<!-- 商品评论 -->
			<goodEvaluate :cid="goodData.id" :cname="goodData.name"></goodEvaluate>
			
			<!-- 店铺卡片 -->
			<shop-card :shopInfo="goodData.store"></shop-card>
			
			<courseParameter :goodParameter="goodData" ></courseParameter>
			<view class="htmlBox">
				<!-- 图文详情 -->
				<text class="parameterTitle">课程详情</text>
				<goodCnt :goodData="goodData"></goodCnt>
				<!-- 须知 -->
				<goodXuzhi :goodData="goodData"></goodXuzhi>
			</view>
			
			<shareAction ref="shareAction" :id="this.goodData.id" :type="2" :poster="true"></shareAction>
			<goodBottom :resouceData="goodData" :uid="parentId"></goodBottom>
		</view>
		<qrcode-poster ref="poster" :title="goodData.name" :headerImg="goodData.img" :price="goodData.price"></qrcode-poster>
	</view>
</template>


<script>
	import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue'
	let scWidth = uni.getSystemInfoSync().screenWidth;
	import ttBar from "@/components/ttBar/ttBar.vue";
	import goodSwiper from "@/components/goodSwiper/goodSwiper.vue";
	import statusBar from "@/components/statusBar/statusBar.vue";
	import goodEvaluate from "@/components/goodEvaluate/goodEvaluate.vue";
	import goodLabels from "@/components/goodItem/goodLabels.vue";
	import goodGuarantee from "@/components/goodItem/goodGuarantee.vue";
	import topOpenBar from "@/components/h5/topOpenBar.vue";
	import goodInfo from "@/components/goodItem/goodInfo.vue";
	import goodCnt from "@/components/goodItem/goodCnt.vue";
	import goodXuzhi from "@/components/goodItem/goodXuzhi.vue";
	import goodBottom from "@/components/goodItem/goodBottom.vue";
	import courseParameter from "@/components/courseParameter/courseParameter.vue";
	import COMM from "@/common/common.js";
	import PRSN from "@/js_sdk/wa-permission/permission.js";
	import shopCard from "@/components/shopCard/shopCard.vue";
	import shareAction from "@/components/shareAction/shareAction.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";

	export default {

		components: {
			ttBar,
			goodSwiper,
			statusBar,
			goodEvaluate,
			courseParameter,
			shopCard,
			shareAction,
			goodLabels,
			goodGuarantee,
			goodInfo,
			goodCnt,
			goodXuzhi,
			goodBottom,
			topOpenBar,
			QrcodePoster
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				initInfo:state=>state.sys.initInfo
			})
		},
		data() {
			return {
				parentId:0,
				videoHeight: uni.getSystemInfoSync().screenWidth,
				titleBg: 'rgba(255,255,255,0)',
				wordsColor: '#FFFFFF',
				btnBg:'rgba(0,0,0,0.5)',
				goodData: {
					name:'课程名称',
					price:0,
					labels:[],
					running:1,
					isDelete:0,
					stock:2,
					prepay:0,
					consIncs:{
						costflow:"1.下订单并支付预约金或全款；\n2.（若该课程支持体验）咨询店铺客服预约体验；\n3.上体验课前将体验码给店铺客服进行验证；\n4.满意则（已支付预约金的订单再支付尾款后）等待开课；",
						costknow:"1.下单后，点击课程详情或订单详情“客服头像”，直接咨询店铺客服，进行预约。\n2.请在确定体验后，再将体验码交给店铺客服。体验码交给店铺客服后，视为已体验。\n3.如确定报名该课程，则需缴纳（课程价-预约金）元。\n4.若您还有其他疑问，请在工作日9:00-20:00间，拨打找培训官方客服：025-84583336。",
						costkown2:''
					}
				},
				shopInfo:{},
				dotsStyles: {
					width: 6,
					height: 4,
					bottom: 5,
					backgroundColor: '#c5c3c6',
					border: 'none',
					selectedBackgroundColor: '#ff6902',
					selectedBorder: 'none',
					borderRadius: 2
				},
				id:0,
			};
		},
		methods: {
			showPoster(){
				uni.showLoading({
				    title: '加载中...',
					mask: true
				})
				let _href='';
				if(this.isLogin){
					_href='url=goodDetail&id='+this.goodData.id+'&uid='+this.userInfo.userId
				}else{
					_href='url=goodDetail&id='+this.goodData.id
				}
				this.$store.dispatch("apiGetMPToken").then(res=>{
					this.$store.dispatch("apiGetMpCodeImg",{
						token:res.data.data.access_token,
						page:'pages/index/index',
						scene:_href,
						width:280
					}).then(imgRes=>{
						if(imgRes.data.code==1){
							COMM.downloadFile(imgRes.data.data,{
								type:1
							}).then(downRes=>{
								this.$refs.poster.showCanvas(downRes)
							})
						}else{
							
						}
						
					})
				})
			},
			getData() {
				uni.showLoading({
					title:'正在加载中'
				})
				if(uni.getStorageSync("toGood")){
					this.goodData=uni.getStorageSync("toGood")
				}
				this.$store.dispatch("apiGetGoodDetailById",{
					id:this.id,
					userId:this.isLogin?this.userInfo.userId:0
				}).then(res => {
						this.goodData = res.data.data;
						this.shopInfo=res.data.data.store;
						uni.hideLoading()
					})
					.catch(err => {

					})
			},
			toCar(){
				if (this.isLogin) {
					this.toPage("car")
				} else {
					this.toPage({
						url:'login',
						to:'car'
					})
				}
			},
			toHome(){
				this.toPage({
					url:'index'
				})
			},
			// 分享
			share(){
				let _href='';
				if(this.isLogin){
					_href='pages/index/index?url=goodDetail&id='+this.goodData.id+'&uid='+this.userInfo.userId
				}else{
					_href='pages/index/index?url=goodDetail&id='+this.goodData.id
				}
				this.$refs.shareAction.setShareData({
					title:this.goodData.name,
					img:this.goodData.img?this.goodData.img:'http://s.de123.com/kf.png',
					href:_href,
					cntText:''
				})
				this.$refs.shareAction.open();
				
			},
			// 上传统计
			postTongji(){
				this.$store.dispatch("apiPostTongji",{
					storeId:this.shopInfo.id,
					type:1,
					userId:this.isLogin?this.userInfo.userId:0
				})
			},
		},
		onLoad(cfm) {
			if(cfm.id.indexOf(',')>-1){
				this.id=cfm.id.split(',')[0];
				this.parentId=parseInt(cfm.id.split(',')[1])
			}else{
				this.id=cfm.id;
			}
			this.getData();
			uni.$on("toggleGz",payload=>{
				if(this.goodData.fav == 0){
					this.goodData.fav=1
				}else{
					this.goodData.fav=0
				}
			})
			setTimeout(()=>{
				this.$store.dispatch("apiReporgLog",{
					type:1,
					linkId:this.id
				})
			},1000);

		},
		onUnload() {
			uni.removeStorageSync("toGood")
		},
		onPageScroll(e) {
			var _this = this;
			if (e.scrollTop > this.videoHeight) {
				this.titleBg = 'rgba(255,255,255,1)';
				this.wordsColor = "#000000";
				this.btnBg="rgba(255,255,255,1)";
			} else {
				this.titleBg = 'rgba(255,255,255,0)';
				this.wordsColor = "#FFFFFF";
				this.btnBg="rgba(0,0,0,0.5)";
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less" >
	page{
		background-color: #F4F4F4;
	}
	.cntColumn{
		display: flex;
		flex-direction: column;
	}

	/* #ifdef MP */
	.titleBg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

	}

	.goodTitle {
		position: fixed;
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		left: 0;
		padding-right: 28%;
		box-sizing: border-box;
		font-size: 36upx;
	}

	.backBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		left: 28upx;
	}

	.carBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		right: 28%;
	}

	/* #endif */


	.mainCnt {
		padding: 0 28upx;
	}


	
	.htmlBox {
		padding: 18upx 28upx 180upx 28upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		.parameterTitle {
			font-size: 32rpx;
			font-weight: bold;
			color: #202932;
		}
		.dtText{
			margin-bottom: 20upx;
			font-size: 32upx;
			color: #202932;
		}
	}
	.xuzhiBox{
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		.gmTitle{
			font-size: 32upx;
			color: #000000;
			font-weight: bold;
			margin-bottom: 10upx;
		}
		.xzTitle{
			font-size: 32upx;
			// font-weight: bold;
			color: #666666;
			margin-bottom: 10upx;
		}
		text{
			font-size: 24rpx ;
			margin-bottom: 10upx;
			color: #202932;
		}
		.fuwuBox{
			display: flex;
			text{
				display: block;
				width: 33.33%;
			}
			
		}
	}

	
	.rIcon{
		font-size: 44upx;
		font-weight: normal;
		margin-left: 20upx;
		width: 70upx;
		height: 70upx;
		background-color: rgba(0,0,0,0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
		
	}
	.lIcon{
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		background-color: rgba(0,0,0,0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}
	.deleteBox{
		display: flex;
		flex-direction: column;
		padding-top: 150upx;
		width: 100%;
		align-items: center;
		.icon-kecheng{
			font-size: 120upx;
			width: 200upx;
			height: 200upx;
			background-color: #CCCCCC;
			border-radius: 50%;
			text-align: center;
			line-height: 200upx;
			color: #FFFFFF;
			margin-bottom: 40upx;
		}
		text{
			font-size: 32upx;
		}
	}
</style>
